<template>
	<view class="user-info">
		<!-- <image :src="info.head" mode="widthFix" class="user-head" @tap="upImg()"></image>
		<view class="up-msg">上传头像</view> -->
		<view class="user-body">
			<view class="user-item">
				<view class="user-label">昵称</view>
				<view class="user-content">
					<input type="text" class="user-input" v-model="info.nick_name" @blur="updateInfo()"/>
				</view>
				<view class="line"></view>
			</view>
			<view class="user-item">
				<view class="user-label">头像</view>
				<view class="user-content uc" @tap="upImg()">
					<!-- <input type="text" class="user-input" v-model="info.nick_name" @blur="updateInfo()"/> -->
					<image :src="info.head" mode=""></image>
					<i class="icon">&#xe638;</i>
					
				</view>
				<view class="line"></view>
			</view>
			<view class="user-item">
					<view class="user-label">姓名</view>
					<view class="user-content">
						<input type="text" class="user-input" v-model="info.real_name" placeholder="请输入姓名" @blur="updateInfo()"/>
					</view>
				<view class="line"></view>
			</view>
			<view class="user-item">
				<view class="user-label">出生日期</view>
				<view class="user-content" @tap="changeBirth()">
					<view v-if="info.birth">{{info.birth}}</view>
					<view v-else>请选择出生日期</view>
					<i class="icon">&#xe638;</i>
				</view>
				<view class="line"></view>
			</view>
			<view class="user-item">
				<view class="user-label">性别</view>
				<view class="user-content" @tap="changeSex()">
					<view>
						<text v-if="info.sex == 0">男</text>
						<text v-else>女</text>
					</view>
					<i class="icon">&#xe638;</i>
				</view>
			</view>
		</view>
		<!-- 性别选择 -->
		<view class="sex-select"  @tap="closeSex()" v-if="sex_select" >
			<view class="sex-select-white word-form-content" @tap.stop="">
				<radio-group @change="radioChange">
					<view class='sex-select-sex'>
						<radio value="0" @tap="closeSex()" :checked="info.sex == 0" style="transform: scale(0.8)"/>男
					</view>
					<view class='sex-select-sex'>
						<radio value="1" @tap="closeSex()" :checked="info.sex == 1" style="transform: scale(0.8)" />女
					</view>
				</radio-group>
			</view>
		</view>
		<!-- 日期选择 -->
<!-- 	<w-picker
		mode="date" 
		startYear="1920" 
		endYear="2018"
		:defaultVal="[0,1,3]" 
		:current="true" 
		@confirm="onConfirm" 
		ref="range" 
		themeColor="#f00"
	></w-picker> -->
	<QSpicker
	mode="bottom" 
	type="date" 
	ref="range"
	:dataSet = "dataSet"
	 @confirm="onConfirm($event)" />
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue';
	
	export default{
		components:{wPicker ,QSpicker},
		data(){
			return {
				info : {},
				head:'',
				sex_select:false,
				endYear:0,
				dataSet:{
					startYear : 1920,
					endYear : 0,
					defaultValue :'2000/1/1' ,
				},
				defaultValue:'',
				inbir:'',
			}
		},
		onLoad() {
			this.getData();
			this.getDate()
		},
		computed:{
		},
		methods:{
			// 获取当前时间
			getDate() {
				var date = new Date()
				let year = date.getFullYear()-1
				let month = date.getMonth() + 1
				let day = date.getDay()
				this.dataSet.endYear = year
			},
			//修改信息
			updateInfo(){
				this.ajax('user/updateInfo',{
					data:{
						nick_name : this.info.nick_name,
						real_name : this.info.real_name,
						sex : this.info.sex,
						birth : this.info.birth,
					},
					success:(res) =>{
						if(res.code == 0)return this.toast(res.msg);
					}
				});
			},
			//获取用户信息
			getData(){
				this.ajax('user/index',{
					success:(res) =>{
						console.log(res)
						this.info = res.msg.user_info;
						console.log(this.info.head)
						this.inbir =res.msg.user_info.birth
						var pic = this.info.head
						var url 
						uni.getImageInfo({
							src:pic,
							success: (res) =>{
								console.log(res)
								url = res.path
								if(res.width >res.height ) url = url +'?x-oss-process=image/rotate,90';
								this.info.head = url
							}
						})
						console.log(this.info.head)
					
					}
				});
			},
			//选择性别
			radioChange(e){
				this.info.sex = e.detail.value;
				this.updateInfo();
			},
			//选择性别
			changeSex(){
				this.sex_select = true;
			},
			closeSex(){
				this.sex_select = false;
			},
			//选择日期
			onConfirm(e){
			console.log(this.dataSet.defaultValue)
				this.info.birth = e.data;
				let dt = e.data;
				dt = dt.split('-').join('/')
				this.defaultValue = dt.split('-').join('/')
				this.dataSet.defaultValue = dt.split('-').join('/')
				console.log(this.dataSet.defaultValue)
				this.updateInfo();
			},
			changeBirth(){
				this.$refs.range.show();
			},
			//上传图片
			upImg(){
				uni.chooseImage({
					sourceType: ['album' , 'camera'],
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title:'正在上传'
						})
						// console.log(tempFilePaths[0])
						uni.getImageInfo({
							src : tempFilePaths[0],
							success:(res) => {
								// console.log(res)
								let canvasWidth = res.width //图片原始长宽
								let canvasHeight = res.height
								let img = new Image()
								img.src = res.path
								let canvas = document.createElement('canvas');
								let ctx = canvas.getContext('2d')
								
								var width = canvasWidth;
								var height = canvasHeight;
								this.width_temp = width;
								this.height_temp = height;
								var len = canvasHeight / canvasWidth;
								if(height > 700) {
									height = 700;
								    width = height / len;
								}
								
								
								canvas.width = width;
								canvas.height = height;
								ctx.drawImage(img, 0, 0, width, height)
								canvas.toBlob((fileSrc) => {
									let imgSrc = window.URL.createObjectURL(fileSrc)
									// console.log('压缩后', imgSrc)
									uni.uploadFile({
										url: '/phone/user/upHeadImg', //仅为示例，非真实的接口地址
										filePath: imgSrc,
										name: 'file',
										formData: {
											'user': 'test'
										},
										success: (uploadFileRes) => {
											var res = JSON.parse(uploadFileRes.data);
											console.log(res)
											console.log(res)
											var url = res.msg;
											if( canvasWidth > canvasHeight ) url = url+'?x-oss-process=image/rotate,90';
											uni.hideLoading();
											if(res.code) {
												this.head = url;
												// this.info.head = url;
												this.getData()
											} else {
												this.toast('图片上传失败');
											}
										}
									});
									return false;
											})
										}
									})
								}
							});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
	.user-info::before{display: table;content: '';}
	.user-head{display: block;width: 150upx;height:150upx;margin:auto;border-radius: 50%;margin-top: 50upx;}
	.up-msg{width: 150upx;text-align: center;margin:10upx auto;}
	// .user-body{margin-top:20upx;}
	.user-item{
	background-color: #FFFFFF;
	// width: calc(100% - 40upx);
	padding:0 20upx;height: 150upx;
	line-height: 150upx;
	box-sizing: border-box;
	}
	.user-item .line {
		width: 100%;
		height: 2upx;
		background-color:#f9f9f9 ;
	}
	.user-item > view{float: left;}
	.user-label {width: 200upx;font-size: 32upx;}
	.user-content{width: calc(100% - 200upx);text-align: right;color:#999}
	.user-content > view{display:inline-block;margin-right: 10upx; }
	.user-content > i{color:#999; font-size:28upx; }
	.user-input{width: 100%;height: 150upx;line-height: 150upx;font-size: 30upx;}
	.sex-select{position: fixed;top:0;left:0;bottom: 0;right: 0;z-index: 9;background: rgba(0,0,0,0.5);}
	.sex-select-white{width: 500upx;margin:40% auto;padding: 40upx;background: #FFFFFF;border-radius: 50upx;}
	.sex-select-sex{height:100upx;line-height: 100upx;border-bottom: 1upx solid #E1E1E1;}
	.sex-select-sex:last-child{border:none}
	.select-date{position: fixed;top:0;left:0;bottom: 0;right: 0;z-index: 9;background: rgba(0,0,0,0.5);padding:40upx;}
	.uc {

		image {
			width: 70upx;
			height: 70upx;
			margin-right: 10upx;
			vertical-align: middle;
			border-radius: 50%;
		}
	}
	.flex_row_e_c.width250rpx {
		height: 100upx !important;
	}
</style>
